<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>聊天表情-emoticons</title>
<!--    <link rel="shortcut icon" href="/public/image/favicon.png">-->
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/dist/public/style/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/dist/public/style/common.css">
    <style type="text/css">
        .emoticons{
            width: 525px;
            margin-bottom:20px;
        }
        .emoticons .publisher{
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px dotted #dbdbdb;
        }
        .emoticons .publisher textarea{
            width: 500px;
            height: 140px;
            padding: 5px 10px;
            border: 1px solid #dbdbdb;
            resize: none;
        }
        .emoticons .publisher .trigger{
            font-size: 24px;
            font-weight: bold;
            color: #666;
        }
        .emoticons .publisher .trigger-active{
            color: #eb7350;
        }
        .emoticons .result{
            padding: 10px 15px;
            border: 1px dotted #dbdbdb;
            margin-top: 10px;
            height: 150px;
            line-height: 24px;
        }
        .emoticons .result img{
            vertical-align: middle;
        }

        .widget-layer{
            position: relative;
            width: 410px;
            margin-top: 8px;
            background: #fff;
            border: 1px solid #dbdbdb;
            border-radius: 2px;
        }
        .widget-layer:before{
            position: absolute;
            top: -16px;
            left: 2px;
            display: block;
            content: '';
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: #dbdbdb;
        }
        .widget-layer:after{
            position: absolute;
            top: -15px;
            left: 2px;
            display: block;
            content: '';
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: #f0f0f0;
        }
        .widget-layer .widget-tool{
            height: 28px;
            background: #f0f0f0;
        }
        .widget-layer .widget-close{
            float: right;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-family: Arial;
        }
        .widget-layer ul{
            width: 372px;
            margin: 0 auto;
            padding: 15px 5px 20px;
            overflow: hidden;
        }
        .widget-layer li{
            position: relative;
            z-index: 8;
            float: left;
            width: 22px;
            height: 22px;
            padding: 4px;
            margin-left: -1px;
            margin-top: -1px;
            border: 1px solid #e8e8e8;
            cursor: pointer;
        }
        .widget-layer li:hover{
            z-index: 9;
            border-color: #eb7350;
        }
    </style>
    <script type="text/javascript" src="${request.contextPath}/statics/dist/public/script/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/dist/code/jquery.emoticons.js"></script>
</head>
<body>
<div class="header">

</div>
<div class="main">
    <div class="emoticons">
        <div class="publisher">
            <p><textarea name="content"></textarea></p>
            <p><a class="trigger" href="javascript:;">☺</a></p>
        </div>
        <div style="text-align:right;"><button id="format">解析</button></div>
        <div id="result" class="result"></div>
    </div>
    <script>
        $.emoticons({
            'activeCls':'trigger-active'
        },function(api){
            var $content = $('textarea[name="content"]');
            var $result = $('#result');
            $('#format').click(function(){
                $result.html(api.format($content.val()));
            });
        });
    </script>
</div>
</body>
</html>
